<template>
  <div class="mobile-bill-view common-mobile-view">
    <bill-query/>
    <bill-daily-list v-if="billStore.billDateType === 'year'"/>
    <bill-calendar v-if="billStore.billDateType === 'month'" />

    <el-button type="primary" :icon="Plus" circle size="large"
               @click="addNewBillRecordClick" class="add-new" />
  </div>
</template>

<script lang="ts" setup>
import BillQuery from '@/components/Bill/BillQuery.vue'
import BillCalendar from '@/components/Bill/BillCalendar.vue'
import BillDailyList from '@/components/Bill/BillDailyList.vue'
import { onMounted } from 'vue'
import { useBillStore } from '@/store/bill.ts'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const billStore = useBillStore()
const router = useRouter()

onMounted(async () => {
  await billStore.refreshInfo()
})

const addNewBillRecordClick = () => {
  billStore.billApiType = 'ADD'
  billStore.currentBillRecord = billStore.getEmptyBillRecord()
  router.push({ name: 'BillDetailId', params: { id: 0 } })
}
</script>

<style lang="scss">
@use "@/styles/home/bill.mobile.module";
</style>
